import { Tabs } from 'antd';
import {withRouter} from 'react-router-dom'
import React, { Component } from 'react'
import router from '../../router'
import PubSub from 'pubsub-js'
import { Icon } from '@ant-design/compatible';
import storageUtils from '../../utils/storageUtils'
const { TabPane } = Tabs;

class Demo extends React.Component {

  onChange = activeKey => {
    console.log(activeKey)
    storageUtils.saveActive_key(activeKey)
    this.setState({ activeKey });
    this.props.history.replace(`${activeKey}`)
  };

  onEdit = (targetKey, action) => {
    console.log("编辑时的回调",targetKey,action)
    this[action](targetKey);
  };  
  
  addtabls =(item) =>{
    const panes = storageUtils.getTabs()
    const activeKey = item.key;
    // const newPanes = [...panes];
    // console.log(newPanes)
    if(JSON.stringify(panes).indexOf(JSON.stringify(item))==-1){
      // arr.push(option); // 进行动态的操作
      // console.log('不存在这个对象')
      // console.log("false")
      panes.push(item);
      storageUtils.saveTabs(panes)
      // console.log('添加一个标签后存储的tabs为',storageUtils.getTabs())
      storageUtils.saveActive_key(activeKey)
      // console.log('添加一个标签后存储的tabs为',storageUtils.getActive_key())
    }else{
      // console.log('存在这个对象')
      storageUtils.saveActive_key(activeKey)
    }   
  }

  remove = targetKey => {
    // const { panes, activeKey } = this.state;
    const panes = storageUtils.getTabs()
    const activeKey = storageUtils.getActive_key()
    let newActiveKey = activeKey;
    let lastIndex;
    panes.forEach((pane, i) => {
      if (pane.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const newPanes = panes.filter(pane => pane.key !== targetKey);
    if (newPanes.length && newActiveKey === targetKey) {
      if (lastIndex >= 0) {
        newActiveKey = newPanes[lastIndex].key;
      } else {
        newActiveKey = newPanes[0].key;
      }
    }
    
    // console.log("删除之后的activeKey",newActiveKey)
    storageUtils.saveTabs(newPanes)
    console.log('删除一个标签后存储的tabs为',storageUtils.getTabs())
    storageUtils.saveActive_key(newActiveKey)
    console.log('删除一个标签后存储的tabs为',storageUtils.getActive_key())
    this.setState({
      panes: newPanes,
      activeKey: newActiveKey,
    },
      ()=>{
        this.props.history.replace(`${newActiveKey}`)
      }
    );
  };

  componentDidMount(){
    this.token=PubSub.subscribe("Tab",(msg,data)=> {
      // console.log("tab接受的消息",data)
      
      this.addtabls(data)
    })
  }

  render() {
    // const { panes, activeKey } = this.state;
    const panes = storageUtils.getTabs()
    // console.log(panes)
    const activeKey = storageUtils.getActive_key()
    return (
      <div className="tabstyle">
        <Tabs
        hideAdd
        type="editable-card"
        onChange={this.onChange}
        activeKey={activeKey}
        onEdit={this.onEdit}
        size="small"
      >
        {panes.map(pane => (
          <TabPane tab={<span><Icon type={pane.icon}/>{pane.title}</span>} key={pane.key} closable={pane.closable}>
            {/* {pane.content} */}
          </TabPane>
        ))}
      </Tabs>
      </div>
      
    );
  }
}
export default withRouter(Demo)